const MyVideoComponent: React.FC = () => {
      const frame = useCurrentFrame();
      const opacity = interpolate(frame, [0, 30], [0, 1]);
  
      return (
          <AbsoluteFill style={{ backgroundColor: 'black' }}>
              <Video
                  src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
                  style={{
                      width: '100%',
                      height: '100%',
                      objectFit: 'cover',
                      opacity,
                  }}
              />
          </AbsoluteFill>
      );
  };

  const VideoControlPanel = (): JSX.Element => {
      const playerReference = useRef<PlayerRef>(null);
  
      const [orientation, setOrientation] = useState<'portrait' | 'landscape'>(
          'landscape',
      );
      const [isPlaying, setIsPlaying] = useState(false);
  
      const onChangeOrientation = useCallback(() => {
          setOrientation(orientation === 'landscape' ? 'portrait' : 'landscape');
      }, [orientation]);
  
      const handlePlayPause = useCallback(() => {
          if (isPlaying && playerReference.current) {
              playerReference.current.pause();
              setIsPlaying(false);
          } else if (!isPlaying && playerReference.current) {
              playerReference.current.play();
              setIsPlaying(true);
          }
      }, [isPlaying]);
  
      return (
          <>
              <button onClick={handlePlayPause} type="button">
                  Play/Pause
              </button>
              <button onClick={onChangeOrientation} type="button">
                  Change Orientation
              </button>
              <Player
                  VideoComponent={MyVideoComponent}
                  playerRef={playerReference}
                  orientation={orientation}
                  durationInFrames={3000}
              />
          </>
      );
  };